<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="文章管理" name="admin">
        <article-admin @handleGoEdit="handleEdit" ref="admin"></article-admin>
      </el-tab-pane>
      <el-tab-pane label="写文章" name="add">
        <article-add @addArticle="handleChange" :id="id"></article-add>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ArticleAdd from "./components/add";
import ArticleAdmin from "./components/admin";
export default {
  components: {
    ArticleAdd,
    ArticleAdmin,
  },
  data() {
    return {
      activeName: "admin",
      id: 0,
    };
  },
  methods: {
    // 保存跳转刷新接口
    handleChange() {
      this.id = 0;
      this.activeName = "admin";
      this.$refs.admin.handleLoadData();
    },
    // 编辑跳转
    handleEdit(id) {
      console.log(id, "id");
      this.activeName = "add";
      this.id = id;
    },
    handleClick(tab, event) {},
  },
};
</script>
<style lang="scss" scoped>
</style>